<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
    <h1>发送axios请求</h1>
    <button class="btn1">发送axios里get形式的请求</button>
    <button class="btn2">发送axios里post形式的请求</button>
    <script>
        // 引入axios
         // axios 会对外暴露一个 axios对象
        // console.dir(axios);
        
        //then方式
        // document.querySelector(".btn1").onclick = function () {
        //     axios({
        //         url:"/getdata",
        //         method:"get",
        //         params:{ //地址栏带参数
        //             x:1,
        //             y:2
        //         }

        //     }).then(res=>{
        //         console.log(res);
        //         let {data} = res;
        //         console.log(data,"data");
        //     })
        // }

        //async await 方式
        document.querySelector(".btn1").onclick = async function () {
        let {data} = await axios({
                url:"/getdata",
                method:"get",
                params:{ //地址栏带参数
                    x:1,
                    y:2
                }

            })

            console.log(data,"await-data");
        }

        function fn() {
            console.log("fn");
        }

        // fn();
        // // mixin  混入模式
        // fn.hello = "你好";
        // console.dir(fn);


        document.querySelector('.btn2').onclick =function(){
            axios({
                url:"/getpostdata",
                method:"post",
                data:{ //post请求携带数据需要写在data里
                    x:3,
                    y:4
                }
                 // data:"x=1&y=2"
            }).then(res=>{
                let {data} =res;
                console.log(data);
            })
        }

    </script>
</body>
</html>